<template>

    <el-container style="height: 100vh;">
        <!-- 主体容器 -->
        <el-aside :width="sidebarWidth" class="sidebar">
            <!-- 侧边栏 Logo -->
            <div class="logo-container">
                <div class="logo">服务平台</div>
            </div>
            <!-- 侧边栏菜单 -->
            <LeftMenu class="leftMenu"></LeftMenu>
        </el-aside>

        <!-- 主要内容区域 -->
        <el-container>
            <!-- 页头 -->
            <el-header style="display: flex; justify-content: flex-end;">
                <HeaderBar></HeaderBar>
            </el-header>

            <!-- 主体内容区域 -->
            <el-main>
                <!-- 标签栏区域 -->
                <div class="content">
                    <el-scrollbar height="calc(100vh - 100px)">
                        <router-view></router-view> <!-- 显示路由对应的内容 -->
                    </el-scrollbar>
                </div>
            </el-main>
        </el-container>
    </el-container>

</template>

<script setup>
import { ref } from 'vue';
import LeftMenu from '../components/LeftMenu.vue';
import HeaderBar from '../components/HeaderBar.vue';

// 侧边栏宽度（用于收缩功能）
const sidebarWidth = ref('200px');

</script>

<style scoped>
/* 主体样式 */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f7fa;
    /* 浅灰色背景色，干净舒适 */
    color: #333;
    /* 深灰色字体 */
}

/* 侧边栏样式 */
.sidebar {
    background-color: #2c3e50;
    /* 深海军蓝色，沉稳且不突兀 */
    transition: width 0.3s ease;
    overflow: hidden;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: #34495e;
    /* 深灰色背景 */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: white;
    transition: width 0.3s;
    white-space: nowrap;
}

/* 侧边栏菜单 */
.leftMenu {
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.el-menu-item {
    padding-left: 30px;
    font-size: 1.1rem;
    color: #bdc3c7;
    /* 浅灰色字体 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.el-menu-item:hover {
    background-color: #16a085;
    /* 温和的绿色高亮 */
    color: white;
}

/* 页头样式 */
.el-header {
    background-color: #34495e;
    /* 深灰色背景 */
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
}

.header-menu {
    background-color: transparent;
}

.header-menu .el-menu-item {
    color: white;
}

.el-header .el-menu-item:hover {
    color: #f39c12;
    /* 金色高亮 */
}

/* 主体内容区域样式 */
.el-main {
    padding: 0px;
    background-color: #fff;
    /* 白色背景 */
}

/* 页面内容样式 */
.content {
    background-color: #fff;
    /* 保持白色，增加整洁感 */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 稍强的阴影效果 */
    height: calc(100vh - 100px);
    padding: 20px;
}

/* 收缩按钮样式 */
.toggle-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: none;
    color: #2980b9;
    /* 海军蓝色 */
    font-size: 20px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .el-header {
        padding: 10px 20px;
    }

    .sidebar {
        width: 220px;
    }

    .content {
        padding: 15px;
        height: calc(100vh - 70px);
    }
}

@media (max-width: 768px) {
    .el-header {
        padding: 10px 15px;
    }

    .sidebar {
        width: 200px;
    }

    .content {
        padding: 10px;
        height: calc(100vh - 60px);
    }
}

@media (max-width: 480px) {
    .el-header {
        flex-direction: column;
        justify-content: center;
        padding: 10px;
    }

    .sidebar {
        width: 150px;
    }

    .content {
        padding: 10px;
        height: auto;
    }
}
</style>
